<template>
	<view class="recommend-page">
		<view class="header">
			<text class="title">海D捞智能推荐</text>
		</view>
		<scroll-view scroll-y class="content" :show-scrollbar="false">
			<view class="products-grid">
				<view class="product-card" v-for="product in products" :key="product.id" @click="goDetail(product.id)">
					<image class="product-image" :src="getImageUrl(product.coverImage)" mode="aspectFill" />
					<view class="product-info">
						<text class="product-title">{{ product.title }}</text>
						<text class="product-price">¥{{ Number(product.price).toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data() {
		return {
			products: []
		}
	},
	onLoad() {
		this.loadRecommendations()
	},
	methods: {
		async loadRecommendations() {
			try {
				const res = await api.getRecommendations()
				if (res.code === 0) {
					this.products = res.data || []
				}
			} catch (e) {
				console.error('加载推荐失败', e)
			}
		},
		getImageUrl(url) {
			if (!url) return '/static/logo.png'
			if (url.startsWith('http')) return url
			return BASE_URL + url
		},
		goDetail(id) {
			uni.navigateTo({ url: `/pages/product/detail?id=${id}` })
		}
	}
}
</script>

<style>
.recommend-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #f5f5f5;
}

.header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx 30rpx;
	text-align: center;
}

.title {
	font-size: 48rpx;
	font-weight: 700;
	color: #fff;
	text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.2);
	letter-spacing: 4rpx;
}

.content {
	flex: 1;
	padding: 20rpx;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.product-card {
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.product-image {
	width: 100%;
	height: 300rpx;
	background: #fafafa;
}

.product-info {
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.product-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-price {
	font-size: 32rpx;
	color: #ff4d4f;
	font-weight: 700;
}
</style>

